<template>
  <div class="dashboard">
    <h2>数据概览</h2>
    
    <!-- 数据卡片区域 -->
    <div class="stat-cards">
      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>用户总数</span>
            <el-icon><User /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ stats.userCount }}</div>
        <div class="card-trend">
          较上月 <span class="up">+5.2%</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>文章数量</span>
            <el-icon><Document /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ stats.articleCount }}</div>
        <div class="card-trend">
          较上月 <span class="up">+12.5%</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>订单数量</span>
            <el-icon><ShoppingCart /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ stats.orderCount }}</div>
        <div class="card-trend">
          较上月 <span class="up">+8.3%</span>
        </div>
      </el-card>

      <el-card class="stat-card">
        <template #header>
          <div class="card-header">
            <span>访问量</span>
            <el-icon><View /></el-icon>
          </div>
        </template>
        <div class="card-value">{{ stats.visitCount }}</div>
        <div class="card-trend">
          较上月 <span class="up">+15.8%</span>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { User, Document, ShoppingCart, View } from '@element-plus/icons-vue'

const stats = ref({
  userCount: '1,234',
  articleCount: '356',
  orderCount: '892',
  visitCount: '45,678'
})
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.stat-card {
  background: white;
  border-radius: 8px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
}

.card-value {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin: 10px 0;
}

.card-trend {
  font-size: 14px;
  color: #999;
}

.up {
  color: #67C23A;
}

.down {
  color: #F56C6C;
}
</style> 